<template>
  <div class="head-container">
    <!-- 搜索 -->
    <!-- <el-input v-model="query.eqptsystem" clearable placeholder="所属系统" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/> -->
    <el-select v-model="query.eqptsystem" :style="style" class="filter-item" placeholder="所属系统" @change="selectFun">
      <el-option
        v-for="(item, index) in eqptSystemList"
        :key="item.label + index"
        :label="item.label"
        :value="item.value"/>
    </el-select>
    <el-input v-model="query.eqpttypeid" clearable placeholder="设备类型" style="width: 150px;" class="filter-item" @keyup.enter.native="toQuery"/>
    <el-input v-model="query.eqptname" clearable placeholder="设备名称" style="width: 150px;" class="filter-item" @keyup.enter.native="toQuery"/>
    <!-- <el-input v-model="query.eqptstate" clearable placeholder="设备状态" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/> -->
    <el-select v-model="query.eqptstate" :style="style" class="filter-item" placeholder="设备状态">
      <el-option
        v-for="(item, index) in eqptstatelist"
        :key="item.label + index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="query.brandname" :style="style" class="filter-item" placeholder="品牌">
      <el-option
        v-for="(item, index) in eqptBrandList"
        :key="item.label + index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-input v-model="query.customerName" clearable placeholder="所属客户" style="width: 150px;" class="filter-item" @keyup.enter.native="toQuery"/>
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <!-- 新增 -->
    <div style="display: inline-block;margin: 0px 2px;">
      <el-button
        v-permission="['ADMIN','TEQUIPMENT_ALL','TEQUIPMENT_CREATE']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="newEqpt">新增</el-button>
      <eForm ref="form" :is-add="true"/>
    </div>
  </div>
</template>

<script>
import eForm from './form'
import { getDictDetails} from '@/api/dictDetail'
export default {
  components: { eForm },
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      queryTypeOptions: [
        { key: 'eqptsystem', display_name: '所属系统' },
        { key: 'eqpttypeid', display_name: '设备类型' },
        { key: 'eqptname', display_name: '设备名称' },
        { key: 'header', display_name: '资产负责人' },
        { key: 'eqptstate', display_name: '设备状态' },
        { key: 'customerName', display_name: '所属客户' },
        { key: 'brandname', display_name: '品牌' }
      ],
      eqptstatelist: [], eqptSystemList: [], eqptTypeList: [],eqptBrandList:[],eqptModelnameList:[],eqptstatelist: []
    }
  },
  created() {
    const explorer = navigator.userAgent
    if (explorer.indexOf('Chrome') >= 0) {
      this.style = 'width: 150px'
    } else {
      this.style = 'width: 142px'
    }
    this.getEqptSystem()
    this.getEqptBrand()
    this.getEqptModelname()
    this.getEqptStates()
  },
  methods: {
    toQuery() {
      this.$parent.page = 0
      this.$parent.init()
    },
    newEqpt() {
      this.$refs.form.dialog = true
      this.$refs.form.getEqptStates()
      this.$refs.form.getEqptSystem()
      this.$refs.form.getEqptBrand()
      this.$refs.form.getEqptModelname()
    },
    selectFun() {
      this.getEqptType(this.form.eqptsystem)
    },
    getEqptStates() {
      getDictDetails('eqpt_status').then(res => {
        this.eqptstatelist = res.content
      })
    },
    getEqptSystem() {
      getDictDetails('eqpt_system').then(res => {
        this.eqptSystemList = res.content
      })
    },
    getEqptBrand() {
      getDictDetails('eqpt_brand').then(res => {
        this.eqptBrandList= res.content
      })
    },
    getEqptModelname() {
      getDictDetails('eqpt_modelname').then(res => {
        this.eqptModelnameList= res.content
      })
    },
    getEqptType(systemid) {
      // this.form.eqpttypeid = null
      getAllEqptType(systemid).then(res => {
        this.eqptTypeList = res.content
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
  }
}
</script>
